<template id="edit_profile">
	<div class="edit_profile">

		<!--头部-->
		<div class="about_header">

			<div class="about_title">
				<router-link to="/main"><img src="../../assets/images/class/jiantou_03.png" /></router-link>

				<p>个人信息</p>
				<div class="about_select">
					<div class="about_ing"></div>
				</div>

			</div>
		</div>
		<!--头部结束-->
		<!--用户头像-->
		<div class="edit_photo" style="height: 91px;">
		 <div id="box" style="position: relative;">
			 	<img :src="image"  style="position: absolute;
    top: 2px;
    left: 174px" >
			<input  id="file" type="file" style="width: 65px;
			    position: absolute;opacity: 0.5;top: 24px;left: 171px;" >
		</div>	
		</div>
		<!--用户头像结束-->
		<!--修改个人信息-->
		<div style="clear: both;"></div>
		<div class="edit_means">

			<div class="deit_self">
				<p><span>昵</span><span>称</span></p>
				<div class="deit_input">
					<input type="text" name="" id="" :value="math.username"/>
					
				</div>
			</div>
			<div class="deit_self">
				<p><span>性</span><span>别</span></p>
				<div class="deit_input"  v-for="(math,index) in nameoptions" :key="index">
					<button class="btnBg" :class="[idx == index?'active':'']" @click="isActive(index)">{{math.gander}}</button>
				</div>
			</div>
			<div class="deit_self">
				<p><span>手</span><span>机</span><span>号</span></p>
				<div class="deit_input">
					<input type="number" name="" id="" :value="math.phone" />
				</div>
			</div>
			<div class="deit_self">
				<p><span>钱</span><span>包</span></p>
				<div class="deit_input">
					<span>{{math.wallet_money}}元</span>
				</div>
			</div>
			<div class="deit_self">
				<p><span>押</span><span>金</span></p>
				<div class="deit_input">
					<span>0元</span>
					<button>申退押金</button>
				</div>
			</div>
			<div class="deit_self">
				<p><span>地</span><span>址</span></p>
				<div class="deit_input">
					<input type="text" name="" id="" :value="address.city+ address.area + address.street +address
.edifice + address.detail_addr" />
				</div>
			</div>

		</div>

		<!--修改个人信息结束-->

		<!--用户协议及隐私政策-->
		<div class="edit_policy">
			<img src="../../assets/images/my_order/my_order_22.png" />
			<span>用户协议及隐私政策</span>
		</div>
		<!--用户协议及隐私政策结束-->

		<!--提交修改-->
		<div class="edit_submit" @click="edit_submit()">
			<button>提交修改</button>
		</div>
		<!--提交修改结束-->

	</div>
</template>

<script>
	export default {
		data() {
			return {
				image:'',
				isShow: false,
				math:'',
				address:[],
				idx: '',
				nameoptions: [{
						"gander": "男",
					},
					{
						"gander": "女",

					},

				],

			}
		},
		created(){
				myCoach: {
				//let SESSION_ID = JSON.parse(window.sessionStorage.getItem('SESSION_ID'));
				 var SESSION_ID=JSON.parse(window.localStorage.getItem('sessiond'))
				let obj = {
					//请求的参数
					sessionid: SESSION_ID.sessionid,
					userid: SESSION_ID.user.id,
					code: 1
				};
				let _this = this
				_this.sessionid = _this.$store.state.sessionid;
				let qs = require('qs');
				this.$axios.post("http://yogahome.top/yujia/user/showPersonalMessage", qs.stringify(obj), {
					headers: {
						'Content-Type': 'application/x-www-form-urlencoded'
					}

				}).then(function(response) {
				
				console.log(response.data.data.defaultaddress.gender);
				_this.idx=response.data.data.defaultaddress.gender
				_this.math = SESSION_ID.user
				_this.address = SESSION_ID.defaultaddress
				

				}).catch(function(error) {
					console.log(error);
				})
			}
		},
		mounted(){
			this.box()
		},
		methods: {
			box:function(){
				this.image=window.localStorage.getItem('image')
				var SESSION_ID=JSON.parse(window.localStorage.getItem('sessiond'))
				console.log(this.image)
				if(this.image == ''){
				   this.image=SESSION_ID.user.head_image
				}
				$("#file").hide();  
				 $("#box").mouseover(function (){  
					$("#file").show();  
				}).mouseout(function (){  
					$("#file").hide();  
				});  
			},
			edit_submit(){
				setTimeout(()=>{
					var _this=this
					var file= document.getElementById('file').files[0]
					var formData = new FormData();
					formData.append('image', file);
					console.log(formData)
						let obj = {
						//请求的参数
						formData: formData,
					};
					$.ajax({
					url:"http://yogahome.top/yujia/admin/uploadimage",
					xhrFields:{
							withCredentials:true
					},
					type: "POST",
					cache: false,
					data: formData,
					processData: false,
					contentType:false,
					async: false,
					success: function (result) {
						console.log(result)
						if(result.message== '文件路径生成成功'){
							alert('图片上传成功')
							_this.image=result.data
							window.localStorage.setItem('image',result.data)
							console.log(_this.image)
						}
					}
         			 });
				})
			},
			toggle: function() {            
				this.isShow = !this.isShow;          
			},
			isActive(index) {			
				this.idx = index
			},
		}
	}
</script>

<style scoped>
	@import "../../assets/css/edit_profile.css";
	.btnBg {
		background: white;
		color: #2d8f90;
	}
	
	.active {
		color: #fff;
		background: #2d8f90;
	}
	
	.moss {
		/*color: #fff;*/
		color: #fff;
		background: #2d8f90;
	}
	.edit_photo{
		position: relative;
	}
	.file{
		position: absolute;
		
	}
</style>